<template>
  <div class="appointment-add">
    <nav-bar title="预约"
             :goback="true"></nav-bar>
    <div class="top-info">
      <img src="/static/icon/appointment/phone-icon.png" />
      <div>
        <p>
          周一至周五：
          <br />
          <br />周六、周日：
        </p>
        <p>
          400-000-2833
          <br />0852-37696145
          <br />400-000-2823
        </p>
      </div>
    </div>
    <div v-if="status==='kkk'" class="base-info-none"></div>
    <div v-else class="base-info">
      <van-row type="flex">
        <van-col span="6" class="info-title">疫苗名称</van-col>
        <van-col span="18" class="info-name">{{ product.name }}</van-col>
      </van-row>
      <van-row type="flex">
        <van-col span="6" class="info-title">疫苗针期</van-col>
        <van-col span="18" class="info-value" style="color:#000">{{ product.times }}</van-col>
      </van-row>
      <van-row type="flex">
        <van-col span="6"
                 class="info-title">疫苗价格</van-col>
        <van-col span="18"
                 class="info-value"
                 style="color:#000">￥7800</van-col>
      </van-row>
      <van-row type="flex">
        <van-col span="6"
                 class="info-title">会员优惠</van-col>
        <van-col span="18"
                 class="info-value info-goto"
                 style="color:#00A44B">会员10%折扣></van-col>
      </van-row>
      <van-row type="flex">
        <van-col span="6"
                 class="info-title">优惠券</van-col>
        <van-col span="18"
                 class="info-value info-goto"
                 style="color:#666666">0张优惠券></van-col>
      </van-row>
      <van-row type="flex">
        <van-col
          span="20"
          class="info-title info-title-integral"
          v-html="'可用'+integral+'积分抵消'+integralMoney+'元'"
        />
        <van-col span="4" class="info-value info-integral">
          <div @click="useIntegralChange">
            <img class="select-icon" v-if="!useIntegral" src="/static/icon/select-none.png" />
            <img class="select-icon" v-else src="/static/icon/select-select.png" />
          </div>
        </van-col>
      </van-row>
      <van-row type="flex">
        <van-col span="24"
                 class="info-value info-sum"
                 style="color:#000">合计¥7020</van-col>
      </van-row>
    </div>
    <div class="input-info">
      <div class="input-title">
        <img src="/static/icon/appointment/select-address.png" />
        <div>
          <span>选择地址</span>
        </div>
      </div>
      <div class="input-content input-address">
        <img class="select-icon"
             v-if="!hospital.name"
             src="/static/icon/appointment/select-none.png" />
        <img class="select-icon"
             v-else
             src="/static/icon/appointment/select-select.png" />
        <a herf="aaa"
           @click="selectAddress">
          <div v-if="!hospital.name">
            <p class="select-none">请选择医院</p>
          </div>
          <div v-else>
            <p class="hospital-name">{{ hospital.name }}</p>
            <p class="hospital-address">{{ hospital.detail }}</p>
          </div>
          <img class="goto-icon"
               src="/static/icon/appointment/goto.png" />
        </a>
      </div>
    </div>
    <div class="input-info">
      <div class="input-title">
        <img src="/static/icon/appointment/select-info.png" />
        <div>
          <span>预约资料</span>
        </div>
      </div>
      <div class="input-content input-data">
        <van-row type="flex">
          <van-col span="6"
                   class="input-label">
            <p>日期</p>
          </van-col>
          <van-col span="18"
                   class="input-value">
            <p class='selectAppointmentDate'
               @click="selectAppointmentDate">{{appointmentDate}}&nbsp;&nbsp;{{selectAppointmentColumns}}</p>
            <!-- <input v-model='appointmentDate'
                   /> -->
          </van-col>
        </van-row>
        <van-row type="flex">
          <van-col span="6"
                   class="input-label">
            <p>备选日期</p>
          </van-col>
          <van-col span="18"
                   class="input-value">
            <p class='selectAlternateDate'
               @click="selectAlternateDate">{{alternateDate}}&nbsp;&nbsp;{{selectAlternateColumns}}</p>
          </van-col>
        </van-row>
        <van-row type="flex">
          <van-col span="6"
                   class="input-label">
            <p>选择用户</p>
          </van-col>
          <van-col span="18"
                   class="input-value">
            <a herf="aaa"
               @click="selectUser">
              <div>
                <span>{{ !user.name ? '请选择用户' : user.name }}</span>
                <img class="goto-icon"
                     src="/static/icon/appointment/goto.png" />
              </div>
            </a>
          </van-col>
        </van-row>
      </div>
    </div>
    <div class="input-info">
      <van-field class="promo-code"
                 v-model="promoCode"
                 label="优惠码："
                 label-align="right"
                 label-width="4.375rem"
                 placeholder="可输入折扣优惠码（选填）">
        <span slot="label">优惠码：</span>
      </van-field>
    </div>
    <div class="scheduling">
      <span>预约针期</span>
      <br />
      <br />
      <span style="color: #e99245">预约前请参阅重要信息。如有疑问，应向医生查询。</span>
    </div>
    <div class="read-checked">
      <van-checkbox v-model="readChecked"
                    shape="square"
                    label-disabled>
        <span>我已阅读并同意隐私政策、使用条款及条件。</span>
        <img slot="icon"
             slot-scope="props"
             :src="props.checked ? '/static/icon/appointment/read-check-yes.png' : '/static/icon/appointment/read-check-no.png'" />
      </van-checkbox>
    </div>
    <div class="submit">
      <van-button class="submit-btn"
                  :disabled="!readChecked"
                  type="primary"
                  size="large"
                  @click="addAppointment">预约</van-button>
    </div>
    <van-popup v-model="pay"
               position="bottom">
      <div class="pay">
        <div class="pay-top">
          <van-icon name="cross"
                    size="1em"
                    @click="closePay"
                    color="#797979"
                    :style="{ zIndex: '100'}" />
          <p>确认付款</p>
        </div>
        <div class="pay-sum">￥7800</div>
        <div class="pay-info">
          <div class="pay-info-label">预约项目</div>
          <div class="pay-info-name">香港康健医疗9价HPV疫苗预约 预防宫颈癌疫苗hpv九价3次接种</div>
        </div>
        <div class="submit">
          <van-button class="submit-btn"
                      :disabled="!readChecked"
                      type="primary"
                      size="large">立即付款</van-button>
        </div>
      </div>
    </van-popup>
    <van-popup position="bottom" v-model="dateShow">
      <datepicker
        :inline="true"
        :language="zh"
        calendar-class="calendar"
        :minimumView="'day'"
        :maximumView="'day'"
        :disabled-dates="disabledDates"
        :value="defaultDate"
        @selected="dayClick"
      ></datepicker>
    </van-popup>
    <van-popup position="bottom"
               v-model="showSelect">
      <van-picker show-toolbar
                  title=""
                  :columns="columns"
                  cancel-button-text=' '
                  @confirm="onConfirm" />
    </van-popup>
  </div>
</template>
<script>
import dayjs from "dayjs";
import NavBar from "@/components/nav/navBar";
import Datepicker from "vuejs-datepicker";
import { zh } from "vuejs-datepicker/dist/locale";
import { mapGetters } from "vuex";
export default {
  components: {
    NavBar,
    Datepicker
  },
  computed: {
    ...mapGetters([
      'address',
      'user',
      'sDate',
      'eDate'
    ]),
  },
  watch: {
    alternateDate (newVal) {
    },
    appointmentDate (newVal) {
    },
  },
  name: "AppointmentAdd",
  data () {
    return {
      zh: zh,
      status: "kk",
      product: {
        name: "香港康健医疗9价HPV疫苗预约 预防宫颈癌疫苗hpv九价3次接种",
        times: "一针"
      },
      integral: 7800,
      integralMoney: 78,
      useIntegral: false,
      hospital: {
        name: "康健尖沙咀",
        detail: "香港尖沙咀弥顿道132号没理华广场a座810至812室"
      },
      appointmentDate: "请选择时间",
      alternateDate: "请输入备选日期",
      readChecked: false,
      promoCode: "",
      pay: false,
      dateShow: false,
      setAppointment: false,
      setAlternate: false,
      disabledDate: ["2019-10-20"],
      monthFirstDay: dayjs()
        .startOf("month")
        .format("YYYY-MM-DD"),
      startDay: "",
      lastDay: "",
      defaultDate: new Date(),
      disabledDates: {
        days: [6, 0],
        to: new Date()
      }, showSelect: false,
      columns: ['上午', '下午'],
      //备选上下午
      selectAlternateColumns: '',
      //主要的上下午
      selectAppointmentColumns: ''
    };
  }, mounted () {
    if (this.sDate) {
      this.appointmentDate = this.sDate;
    }
    if (this.eDate) {
      this.alternateDate = this.eDate;
    }
    var dateStart = new Date();
    dateStart.setDate(dateStart.getDate() + 7);
    this.disabledDates.to = dateStart;
    this.hospital = this.address
  },
  methods: {
    addAppointment () {
      this.pay = true;
    },
    closePay () {
      this.pay = false;
    },
    selectAddress () {
      this.$router.push('/address')
    },
    selectUser () {
      this.$router.push('/subscriber')
    },
    selectAlternateDate () {
      this.setAppointment = false;
      this.setAlternate = true;
      this.dateShow = true;
      setTimeout(() => {
        if (this.alternateDate !== "请输入备选日期") {
          this.defaultDate = new Date(
            Date.parse(this.alternateDate.replace(/-/g, "/"))
          );
        } else {
          this.defaultDate = null;
        }
      })

    },
    selectAppointmentDate () {
      this.setAlternate = false;
      this.setAppointment = true;
      this.dateShow = true;
      setTimeout(() => {
        if (this.appointmentDate !== "请选择时间") {
          this.defaultDate = new Date(
            Date.parse(this.appointmentDate.replace(/-/g, "/"))
          );
        } else {
          this.defaultDate = "";
        }
      });
    },
    dayClick (date) {
      var dateStr =
        date.getFullYear() +
        "-" +
        ("0" + (date.getMonth() + 1)).slice(-2) +
        "-" +
        ("0" + date.getDate()).slice(-2);
      this.showSelect = true;
      if (this.setAlternate) {
        this.alternateDate = dateStr;
        this.$store.dispatch("appointmen/setAlternateDate", this.alternateDate);
      }
      if (this.setAppointment) {
        this.appointmentDate = dateStr;
        this.$store.dispatch("appointmen/setAppointmentDate",this.appointmentDate);
      }
      this.dateShow = false;
    },
    useIntegralChange () {
      this.useIntegral = !this.useIntegral;
    },
    // onCancel(){},
    onConfirm (val) {
      if (this.setAlternate) {
        this.selectAlternateColumns = val;
      }
      if (this.setAppointment) {
        this.selectAppointmentColumns = val;
      }
      this.showSelect = false
    },
  }
};
</script>
<style lang="scss" scoped>
.appointment-add {
  .top-info {
    clear: both;
    position: absolute;
    top: 0;
    width: 320px;
    height: 217px;
    background: #00a44b;
    img {
      float: left;
      width: 71px;
      height: 69px;
      margin: 70px 7px 0 38px;
    }
    div {
      float: left;
      margin-top: 75px;
      p {
        margin: 0;
        font-size: 12px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: rgba(255, 255, 255, 1);
        line-height: 21px;
      }
      p:first-child {
        float: left;
      }
      p:last-child {
        float: left;
      }
    }
  }
  .base-info-none{
    position: relative;
    margin: 166px 9px 0 9px;
  }
  .base-info {
    position: relative;
    margin: 166px 9px 0 9px;
    width: 264px;
    background-color: white;
    box-shadow: 0px 0 2px 2px #fafafa;
    border-radius: 6px;
    padding: 0px 23px 10px 16px;
    .info-title {
      text-align: left;
      font-size: 12px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: rgba(102, 102, 102, 1);
      margin-top: 10px;
    }
    .info-name {
      text-align: left;
      font-size: 13px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: rgba(0, 0, 0, 1);
      line-height: 18px;
      margin-top: 10px;
    }
    .info-value {
      font-size: 12px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      line-height: 12px;
      margin-top: 10px;
      text-align: right;
    }
    .info-goto {
      position: relative;
      right: -4px;
    }
    .info-sum {
      margin-top: 12px;
    }.info-title-integral {
      margin-top: 21px;
      font-size: 11px;
    }
    .info-integral {
      div {
        img {
          margin-top: 11px;
          width: 15px;
          height: 15px;
        }
      }
    }
  }
  .input-info {
    position: relative;
    margin: 10px 9px 0 9px;
    box-shadow: 0px 0 2px 2px #fafafa;
    background-color: #f0f0f0;
    border-radius: 6px;
    padding-bottom: 1px;
    .input-title {
      height: 31px;
      img {
        float: left;
        width: 15px;
        height: 15px;
        margin: 9px 8px 0 18px;
        line-height: 1px;
      }
      div {
        float: left;
        margin-top: 4px;
      }
      span {
        color: #00a44b;
        font-size: 11px;
        font-family: Microsoft YaHei;
        font-weight: 400;
      }
    }
    .input-content {
      background-color: #fff;
      margin: 0 1px;
      width: 300px;
      min-height: 55px;
      border-bottom-right-radius: 6px;
      border-bottom-left-radius: 6px;
    }

    .goto-icon {
      float: right;
      width: 10px;
      height: 15px;
    }
    .input-address {
      overflow: -webkit-paged-x;
      .select-icon {
        float: left;
        width: 15px;
        height: 15px;
        margin: 18px 20px 0 15px;
      }
      a div {
        float: left;
        width: 210px;
        .select-none,
        .hospital-name {
          color: #666666;
          font-size: 12px;
          font-family: Microsoft YaHei;
          line-height: 1em;
          margin: 18px 0 0 0;
        }
        .hospital-name {
          margin: 9px 0 0 0;
        }
        .hospital-address {
          color: #1f1f1f;
          font-size: 11px;
          font-family: Microsoft YaHei;
          line-height: 1.2em;
          margin: 5px 0 0 0;
        }
      }
      .goto-icon {
        margin: 18px 28px 0 0;
      }
    }
    .input-data {
      padding-top: 8px;
      padding-bottom: 4px;
      p.selectAlternateDate,
      p.selectAppointmentDate {
        color: #666666;
        font-size: 12px;
        font-family: Microsoft YaHei;
        line-height: 26px;
        margin-left: 15px;
        margin-right: 10px;
        margin: 0;
        padding-left: 17px;
        margin-top: 4px;
        height: 26px;
        width: 195px;
        background-color: #fafafa;
      }
      > div {
        padding: 0 0 8px 0;
        height: 36px;
      }
      .input-label > p {
        text-align: right;
        color: #666666;
        font-size: 12px;
        font-family: Microsoft YaHei;
        line-height: 1em;
        margin: 10px 15px 0 0;
      }
      input,
      a > div {
        margin-top: 4px;
        height: 26px;
        width: 210px;
        background-color: #fafafa;
      }
      input {
        border: none;
        font-size: 12px;
        color: #666666;
      }
      a {
        > div {
          span {
            color: #666666;
            font-size: 12px;
            font-family: Microsoft YaHei;
            line-height: 1em;
            margin-left: 15px;
          }
          .goto-icon {
            margin-top: 4px;
            margin-right: 13px;
          }
        }
      }
    }
  }
  .promo-code {
    font-size: 12px;
    padding: 5px;
    span {
      color: #666666;
      font-size: 12px;
      font-family: Microsoft YaHei;
      line-height: 1em;
    }
  }
  .scheduling {
    padding: 15px 15px 0 22px;
    color: #666666;
    font-size: 12px;
    font-family: Microsoft YaHei;
    line-height: 1em;
  }
  .read-checked {
    font-size: 10px;
    line-height: 1em;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #666;
    text-align: center;
    padding-top: 6px;
    img {
      position: relative;
      right: -5px;
      top: 2px;
      height: 12px;
      width: 12px;
    }
  }
  .submit {
    padding: 0 76px;
    .submit-btn {
      margin: 10px 0px 20px 0px;
      position: relative;
      height: 29px;
      font-size: 15px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: rgba(255, 255, 255, 1);
      line-height: 1em;
      background-color: #06a44f;
      border-color: #06a44f;
      border-radius: 4px;
    }
    .submit-btn[disabled] {
      background-color: #666666;
      border-color: #666666;
    }
  }
  .pay {
    width: 320px;
    height: 287px;
    position: relative;
    .pay-top {
      position: relative;
      padding: 11px 13px 0 13px;
      font-size: 18px;
      height: 28px;
      border-bottom: 1px solid #f5f5f5;
      p {
        position: absolute;
        top: 11px;
        left: 0;
        margin: 0;
        width: 320px;
        text-align: center;
        font-size: 14px;
      }
    }
    .pay-sum {
      text-align: center;
      padding-top: 34px;
      font-size: 20px;
      line-height: 1em;
    }
    .pay-info {
      padding-top: 41px;
      height: 41px;
      border-bottom: 1px solid #f5f5f5;
      div {
        color: #666;
        line-height: 1.2em;
      }
      .pay-info-label {
        float: left;
        font-size: 12px;
        padding-left: 14px;
        padding-top: 6px;
      }
      .pay-info-name {
        float: right;
        font-size: 11px;
        padding-right: 12px;
        width: 110px;
        height: 2.4em;
        overflow: hidden;
        display: -webkit-box;
        /*! autoprefixer: off */
        -webkit-box-orient: vertical;
        /*! autoprefixer: on */
        -webkit-line-clamp: 2;
      }
    }
    .submit {
      padding: 0 11px 19px 13px;
      position: fixed;
      bottom: 0;
      .submit-btn {
        margin: 0px;
        width: 295px;
        height: 40px;
      }
    }
  }
}
</style>
<style lang="scss">
.appointment-add {
  .calendar {
    border: none;
    width: 100%;
    margin-bottom: 10px;
    header .prev:not(.disabled):hover,
    header .next:not(.disabled):hover {
      background: none;
    }
    span {
      color: #666666;
    }
    .prev:after {
      border-right: 10px solid #06a450c7;
    }
    .next:after {
      border-left: 10px solid #06a450c7;
    }
    .day {
      border-radius: 4px;
    }
    .cell:not(.blank):not(.disabled).day:hover {
      border: 1px solid #06a44f !important;
    }
    .selected {
      background-color: #06a4507a !important;
      border: 1px solid #06a44f !important;
      color: #ffffff;
    }
    .disabled {
      color: #bbbbbb !important;
      // border: 1px solid #bbbbbb !important;
      border-radius: 0;
    }
  }
}
</style>
<style>
.m-next-btn {
  background-image: url("/static/icon/datepicker/next-lv.png") !important;
}
.m-prev-btn {
  background-image: url("/static/icon/datepicker/pre-lv.png") !important;
}
.m-day .m-select {
  background: #06a44f !important;
}
</style>